<html>
    <head>
        <title>OSGi Bundles</title>
        <link rel="stylesheet" type="text/css" href="<@s.url value="/static/css/main.css" />" />
        <link rel="stylesheet" type="text/css" href="<@s.url value="/static/css/redmond/jquery-ui-1.7.1.custom.css" />" />
        <script src="<@s.url value="/static/js/jquery-1.3.2.min.js" />"></script>
        <script src="<@s.url value="/static/js/jquery-ui-1.7.1.custom.min.js" />"></script>
        <style type="text/css">
		form div{
			display: inline-block;
			float: left;
			width: 350px;
			height: 300px;
			line-height: 200px
		}
		form div select{
			width: 100%;
			height: 300px;
		}
		form ul{
      list-style:none;
      margin:0;
      padding:0;
      width: 30px;
      display: inline-block;
      float: left;
      margin-top: 85px;
		}
		form ul li{
      padding: 4px 4px;
      margin: 2px;
		}
		</style>
		<script type="text/javascript">
			$(function(){
				$("#autoBtn").bind("click",function(){
					$("#auto option:selected").appendTo("#notAuto");
				});
				$("#notAutoBtn").bind("click",function(){
					$("#notAuto option:selected").appendTo("#auto");
				});
				$("#autoUpBtn").bind("click",function(){
					var options=$("#auto option:selected");
					$.each(options,function(i,item){
						var p=$(item).prev();
						if(p.length){
							p=$(p);
							if(!p.attr("selected")){
								$(item).after(p);
							}
						}
					});
				});
				$("#autoDownBtn").bind("click",function(){
					var options=$("#auto option:selected");
					var op;
					for(var i=options.length-1;i>=0;i--){
						op=$(options[i]);
						var p=$(op).next();
						if(p.length){
							p=$(p);
							if(!p.attr("selected")){
								op.before(p);
							}
						}
					}
					$.each(options,function(i,item){
						var p=$(item).next();
						if(p.length){
							p=$(p);
							if(!p.attr("selected")){
								$(item).after(p);
							}
						}
					});
				});
			});
			function sub(){
				var options=$("#auto option");
				var start=$('#autoStarts').empty();
				$.each(options,function(i,item){
					$("<input type='hidden' name='autoStarts'>")
					.val($(item).val()).appendTo(start);
				});
				$("form").submit();
			}
		</script>
    </head>
<body>
	<div class="menu">
	    <div  style="float:right;">
          <@s.url var="uploadUrl" namespace="/osgi/admin" action="upload" includeParams="none" />
	        <@s.url var="bundlesUrl" namespace="/osgi/admin" action="bundles" includeParams="none" />
	        <a href="${uploadUrl}" class="ui-state-default ui-corner-all fg-button fg-button-icon-left">
	            <span class="ui-icon ui-icon-bullet"></span>
              上传
	        </a>
	        <a href="${bundlesUrl}" class="ui-state-default ui-corner-all fg-button fg-button-icon-left">
	            <span class="ui-icon ui-icon-bullet"></span>
	            Bundles
	        </a>
	        <a href="autoStart!start.action" class="ui-state-default ui-corner-all fg-button fg-button-icon-left">
	            <span class="ui-icon ui-icon-bullet"></span>
              Start
	        </a>
	    </div>    
	</div>
	<@s.actionerror />
  <div>
    <button  type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false" onclick="sub()">
        <span class="ui-button-text">确定</span>
    </button>
  </div>
	<form action="autoStart!update.action" method="post">
		<div id="autoStarts" style="display:none">
		</div>
		
		<div>
			<select multiple="multiple" id="auto">
				<#list autoStartBundles as bundle>
					<option value="${bundle.symbolicName};${bundle.version}">${bundle.symbolicName}(${bundle.version})</option>
				</#list>
			</select>
			</div>
			<ul class="ui-widget ui-helper-clearfix">
        <li class="ui-state-default ui-corner-all" id="autoUpBtn" >
          <span class="ui-icon ui-icon-arrowthick-1-n"></span>
        </li>
        <li class="ui-state-default ui-corner-all" id="autoBtn" >
          <span class="ui-icon ui-icon-arrowthick-1-e"></span>
        </li>
        <li class="ui-state-default ui-corner-all" id="notAutoBtn" >
          <span class="ui-icon ui-icon-arrowthick-1-w"></span>
        </li>
        <li class="ui-state-default ui-corner-all" id="autoDownBtn" >
          <span class="ui-icon ui-icon-arrowthick-1-s"></span>
        </li>
			</ul>
			<div>
			<select multiple="multiple" id="notAuto">
				<#list notAutoStartBundles as bundle>
					<option value="${bundle.symbolicName};${bundle.version}">${bundle.symbolicName}(${bundle.version})</option>
				</#list>
			</select>
			</div>
	</form>
</body>
</html>
